<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简明易说日历小程序管理后台</title>
    <link
        rel="stylesheet"
        href="https://image-space.thebestxt.cc/website/css/ele-plus.css"
    />
    <!-- Import Vue 3 -->
    <script src="https://image-space.thebestxt.cc/website/js/ele-plus-zh-cn.js"></script>
    <script src="https://image-space.thebestxt.cc/website/js/vue3.js"></script>
    <!-- Import component library -->
    <script src="https://image-space.thebestxt.cc/website/js/ele-plus.js"></script>
    <script src="https://image-space.thebestxt.cc/website/js/ele-plus-icon.js"></script>
    <style>
        #app {

        }
        .title {
            width: 100%;
            text-align: center;
            margin-top: 15vh;
            font-size: xx-large;
            font-weight: 700;
            color: #333;
        }
        .subtitle {
            width: 100%;
            text-align: center;
            font-size: larger;
            font-weight: 300;
            margin-top: 20px;
        }
        .tabs {
            margin: 30px 25% 0 25%;
        }
        .upload {
            width: 80%;
            margin-left: 10%;
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .el-upload {
            width: 100%;
        }
        .button {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 50px;
        }
        .tip {
            width: 100%;

            display: flex;
            flex-direction: column;
            margin-top: 20px;
        }
        .tip-title {
            font-size: medium;
            font-weight: 700;
        }
        .tip-row {
            font-size: smaller;
            color: #666;
        }
        .tip-row::before {
            content: '· ';
        }

        .filelist-title {
            border-left: solid 5px #3595FB;
            padding-left: 10px;
            margin-left: 25%;
            margin-top: 50px;
            margin-bottom: 20px;
        }

        .filelist {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .filelist .fileitem {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: calc(33% - 30px);
            margin: 10px;
        }
        .filelist .fileitem .fileitem-image {}
        .filelist .fileitem .fileitem-name {
            font-size: small;
            color: #333;
            margin-top: 10px;
        }
        .log-row {
            margin-bottom: 20px;
            font-size: small;
        }
        .log-row-title {
            font-size: medium;
        }
    </style>
</head>
<body>
    <div id="app" class="index-container">
        <div class="header">
            <div class="header-icon">
              <img class="icon-img" :src="LogoImg">
            </div>
            <div class="header-extra">更多</div>
        </div>
        <div class="bottom">
            <div class="left">
                <SidebarMenu></SidebarMenu>
            </div>
            <div class="right">
                <div class="body">
                    <router-view></router-view>
                </div>
                <div class="footer">
                    C'astle 是一个 NAS 后台管理系统，由 xt 设计和开发。
                </div>
            </div>
        </div>
    </div>
    <script>
        const { createApp, ref } = Vue
        XUE_CALENDAR_MAIN(function() {
            const activeTabName = ref('first')
            const url = ref('/xue_calendar')
            // const url = ref('http://mynbxuanbro.thebestxt.cc/xue_calendar')
            const urlPrefix = ref('https://image-space.thebestxt.cc/')

            const list = ref(JSON.parse('{{ list | safe }}'))
            const log = ref(JSON.parse('{{ log | safe }}'))

            console.log(list);


            const handleError = (res, file, files) => {
                ElementPlus.ElMessage.error('这个不能传啊兄弟')
            }
            const handleSuccess = (res, file, files) => {
                console.log('on success', res, file, JSON.parse(JSON.stringify(files)))
                if (res.code == 200) {
                    ElementPlus.ElMessage.success(`${file.name} 上传完成`)
                    if (files.every(v => v.status === 'success')) {
                        ElementPlus.ElMessage.success(`全部上传完成，2秒后刷新页面以重新载入文件列表`)
                        setTimeout(() => {
                            location.reload()
                        }, 2000)
                    }
                } else {
                    ElementPlus.ElMessage.error(res.msg)
                }
            }
            const handleUpload = () => {
                ElementPlus.ElMessage.warning('不用点按钮，你选了文件就自动传了')
            }
            const handleOpenWebsite = () => {
                window.open(url.value)
            }

            const handlePreview = url => {
                window.open(url)
            }
            const handleDelete = key => {
                fetch(`/xue_calendar/delete?key=${key}`).then(resp => {
                    console.log('handleDelete.res')
                    resp.json().then(res => {
                        console.log(res)
                        if (res.code === 200) {
                            ElementPlus.ElMessage.success('删除成功')
                            const findIndex = list.value.findIndex(v => v.key === key)
                            if (findIndex > -1) {
                                list.value.splice(findIndex, 1)
                            }
                        } else {
                            ElementPlus.ElMessage.error(res.msg)
                        }
                    })
                })
            }
            const handleDeleteAll = key => {
                fetch(`/xue_calendar/delete`).then(resp => {
                    console.log('handleDeleteAll.res', resp)
                    resp.json().then(res => {
                        console.log(res)
                        if (res.code === 200) {
                            ElementPlus.ElMessage.success('删除成功')
                            window.location.reload()
                        } else {
                            ElementPlus.ElMessage.error(res.msg)
                        }
                    })
                })
            }
            return {
                activeTabName,
                url,
                urlPrefix,
                list,
                log,
                handleError,
                handleSuccess,
                handleUpload,
                handleOpenWebsite,
                handlePreview,
                handleDelete,
                handleDeleteAll,
            }
        })
    </script>
</body>
</html>